<template>
	<view class="l-collapse-item">
		<view class="l-collapse-item__title l-collapse-item-border"
			:class="{'is-open':isOpen}">
			<view class="l-collapse-item__title-wrap">
				<slot name="title">
					<view  @click="onClick(!isOpen)" class="l-collapse-item__title-wrap_top">
						<view class="l-collapse-item__title-box">
							<!-- <image v-if="titleImg" :src="titleImg" class="l-collapse-item__title-img" /> -->
							<text class="l-collapse-item__title-text">{{ title }}</text>
							<text class="l-collapse-item__title-tips" v-if="tips">{{ tips }}</text>
						</view>
						<view class="l-collapse-item__title-wrap_top" v-if="tips||rightIcon">
							<!-- <view class="isOpen-text">{{isOpen?'收起':'展开'}}</view> -->
							<view :class="{ 'l-collapse-item__title-arrow-active ': isOpen, }"
								class="l-collapse-item__title-arrow l-collapse-item--animation">
								
								<image src="../../static/imgs/mine/right.png" class="l-icons"></image>
							</view>
						</view>
					</view>
					
					<view class="l-collapse-item__title-content" v-if="planImg||planTitle">
						<image :src="planImg+'?imageView2/2/w/54/h/54/q/75'" mode="aspectFit"></image>
						<view>{{planTitle}}</view>
					</view>
				</slot>
			</view>
			
		</view>
		<view class="l-collapse-item__wrap is--transition" v-show="isOpen">
			<!-- :style="{height: (isOpen?height:0) +'px'}" -->
			<view :id="elId" ref="collapse--hook" class="l-collapse-item__wrap-content"
				:class="{open:isheight,'l-collapse-item--border':isOpen}">
				<slot></slot>
			</view>
		</view>

	</view>
</template>

<script>
	import bgIcons from "./ls-icons/ls-icons.vue";
	// #ifdef APP-NVUE
	const dom = weex.requireModule('dom')
	// #endif
	export default {
		name: 'lCollapseItem',
		props: {
			// 列表标题
			title: {
				type: String,
				default: ''
			},
			// 列表提示
			tips:{
				type:String,
				default: ''
			},
			// 是否展开
			open: {
				type: Boolean,
				default: false
			},
			// 标题左侧缩略图
			titleImg: {
				type: String,
				default: ''
			},
			rightIcon:{
				type: Boolean,
				default: false
			},
			planImg:String,
			planTitle:String,
			itemId:String,
		},
		components:{
			bgIcons
		},
		data() {
			// TODO 随机生生元素ID，解决百度小程序获取同一个元素位置信息的bug
			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
			return {
				isOpen: false,
				isheight: null,
				height: 0,
				elId,
				nameSync: 0
			}
		},
		watch: {
			open(val) {
				this.isOpen = val
				this.onClick(val, 'init')
			}
		},
		created() {
			this.collapse = this.getCollapse()
			this.onClick(this.open, 'init')
		},
		mounted() {
			if (!this.collapse) return
			this.nameSync = this.collapse.childrens.length + ''

			if (this.collapse.names.indexOf(this.nameSync) === -1) {
				this.collapse.names.push(this.nameSync)
			}
			if (this.collapse.childrens.indexOf(this) === -1) {
				this.collapse.childrens.push(this)
			}
			this.init()
		},
		methods: {
			init(type) {
				// #ifndef APP-NVUE
				this.getCollapseHeight(type)
				// #endif
				// #ifdef APP-NVUE
				this.getNvueHwight(type)
				// #endif
			},
			onClick(isOpen, type) {
				this.isOpen = isOpen
				this.$emit('openClick',isOpen)
				if (this.isOpen && this.collapse) {
					this.collapse.setAccordion(this)
				}
			},
			getCollapseHeight(type, index = 0) {
				const views = uni.createSelectorQuery().in(this)
				views
					.select(`#${this.elId}`)
					.fields({
						size: true
					}, data => {
						// TODO 百度中可能获取不到节点信息 ，需要循环获取
						if (index >= 10) return
						if (!data) {
							index++
							this.getCollapseHeight(false, index)
							return
						}
						// #ifdef APP-NVUE
						this.height = data.height + 1
						// #endif
						// #ifndef APP-NVUE
						this.height = data.height
						// #endif
						this.height = data.height
						this.isheight = true
						if (type) return
						this.onClick(this.isOpen, 'init')
						this.$forceUpdate()
					})
					.exec()
			},
			getNvueHwight(type) {
				const result = dom.getComponentRect(this.$refs['collapse--hook'], option => {
					if (option && option.result && option.size) {
						// #ifdef APP-NVUE
						this.height = option.size.height + 1
						// #endif
						// #ifndef APP-NVUE
						this.height = option.size.height
						// #endif
						this.isheight = true
						if (type) return
						this.onClick(this.open, 'init')
					}
				})
			},
			/**
			 * 获取父元素实例
			 */
			getCollapse(name = 'lCollapse') {
				let parent = this.$parent;
				let parentName = parent.$options.name;
				while (parentName !== name) {
					parent = parent.$parent;
					if (!parent) return false;
					parentName = parent.$options.name;
				}
				return parent;
			}
		}
	}
</script>

<style lang="scss">
	.l-icons {
		width:36rpx;
		height:32rpx;
	}
	.icon-xiala:before {
	  content: "\e6b9";
	}
	.isOpen-text{
		font-size: 28rpx;
		font-weight: 400;
		color: #9E9E9E;
	}
	.l-collapse-item {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		background: #fff;
		margin-bottom: 10rpx;

		/* #endif */
		&__title {
			/* #ifndef APP-NVUE */
			display: flex;
			width: 100%;
			box-sizing: border-box;
			/* #endif */
			flex-direction: row;
			align-items: center;
			transition: border-bottom-color .3s;
			
			&-wrap {
				width: 100%;
				flex: 1;
				&_top{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}

			&-box {
				padding: 0 0 0 30rpx;
				/* #ifndef APP-NVUE */
				// display: flex;
				// width: 100%;
				box-sizing: border-box;
				/* #endif */
				// flex-direction: row;
				// justify-content: space-between;
				// align-items: center;
				height: 90rpx;
				line-height: 90rpx;
				background-color: #fff;
				color: #303133;
				font-size: 26rpx;
				font-weight: bold;
				/* #ifdef H5 */
				cursor: pointer;
				outline: none;

				/* #endif */

			}
			
			&-content{
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				image{
					margin-right: 24rpx;
					width: 108rpx;
					height: 108rpx;
					border-radius: 10rpx 10rpx;
					margin-left: 30rpx;
				}
			}
			
			&.l-collapse-item-border {
				border-bottom: 1px solid #ebeef5;
			}

			&.is-open {
				border-bottom-color: transparent;
			}

			&-img {
				height: 44rpx;
				width: 44rpx;
				margin-right: 20rpx;
			}

			&-text {
				flex: 1;
				/* #ifndef APP-NVUE */
				white-space: nowrap;
				color: inherit;
				/* #endif */
				/* #ifdef APP-NVUE */
				lines: 1;
				/* #endif */
				overflow: hidden;
				text-overflow: ellipsis;
				
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}
			&-tips{
				font-size: 28rpx;
				font-weight: 400;
				color: #7A7A7A;
				margin-left: 30rpx;
			}

			&-arrow {
				/* #ifndef APP-NVUE */
				display: flex;
				box-sizing: border-box;
				/* #endif */
				align-items: center;
				justify-content: center;
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
				transform: rotate(0deg);

				&-active {
					transform: rotate(90deg);
				}
			}


		}

		&__wrap {
			/* #ifndef APP-NVUE */
			will-change: height;
			box-sizing: border-box;
			/* #endif */
			background-color: #fff;
			overflow: hidden;
			position: relative;
			// height: 0;

			&.is--transition {
				transition-property: height, border-bottom-width;
				transition-duration: 0.3s;
				/* #ifndef APP-NVUE */
				will-change: height;
				/* #endif */
			}



			&-content {
				position: absolute;
				font-size: 26rpx;
				color: #303133;
				border-bottom-color: transparent;
				border-bottom-style: solid;
				border-bottom-width: 0;

				&.l-collapse-item--border {
					border-bottom-width: 1px;
					border-bottom-color: red;
					border-bottom-color: #ebeef5;
				}

				&.open {
					position: relative;
				}
			}
		}

		&--animation {
			transition-property: transform;
			transition-duration: 0.3s;
			transition-timing-function: ease;
		}

	}
</style>
